<template>
  <div style="background-color: white">
    <div style="margin-top: -15px">
    <el-menu default-active="/viewAllMonitoring" active-text-color="#54CACE" class="el-menu-demo" mode="horizontal" router="true">
      <el-menu-item index="/realTimeMonitoring" style="font-size: 20px; font-weight: bold;">实时数据监控</el-menu-item>
      <el-menu-item index="/viewAllMonitoring" style="font-size: 20px; font-weight: bold; color: black">所有站点摄像头</el-menu-item>
    </el-menu>
    </div>
    <div style="margin-top: 20px">
      <el-row>
        <!-- 宫格布局 -->
        <el-col :span="6" v-for="n in num" :key="n">
          <div>
            <div class="grid-item bordered" style="position: relative;">
              <!-- 放置视频图像 -->
              <div style="position: relative;">
              <img @click="dialogVisible=true" src="..\src\temp\test.png" :alt="`Video ${n}`" style="max-width:100%; max-height:100%;">
              <button style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: none;">
                <img :src="playButton" style="width: 60px; height: 60px;" alt="Play Button">
              </button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose">
      <template slot="title">
      <div class="custom-title" >摄像头01</div>
      </template>
      <el-container>
        <el-aside width="65%" style="position: relative; overflow: hidden;">
          <img :src="main_video" style="width: 100%; height: 100%; object-fit: cover; margin-top: -15px">
        </el-aside>
        <el-main style="overflow-y: hidden; height: 100%;">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 10px; margin-top: -15px;">
            <el-tab-pane label="摄像头信息" name="first">
              <div style="margin-left: 20px">
                项目名称:
                <br>
                <br>
                视频名称:
                <br>
                <br>
                接入方式:
                <br>
                <br>
              </div>
            </el-tab-pane>
            <el-tab-pane label="历史视频查看" name="second">
              <div style="height: 330px; overflow-y: auto;">
                <el-row>
                  <!-- 宫格布局 -->
                  <el-col :span="12" v-for="n in num" :key="n">
                    <div>
                      <div class="grid-item bordered" style="position: relative;">
                        <!-- 放置视频图像 -->
                        <img @click="changeVideo()" :src="aside_video" :alt="`摄像头 ${n}`" style="max-width:100%; max-height:100%;">
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
      <el-footer>
        <el-row type="flex">
          <el-col :span="3" style="margin-left: 100px">
            <el-button class="custom-button" :disabled="isDisabled">角度左移</el-button>
          </el-col>
          <el-col :span="3">
            <el-button class="custom-button" :disabled="isDisabled">角度右移</el-button>
          </el-col>
          <el-col :span="3">
            <el-button class="custom-button" :disabled="isDisabled">角度推进</el-button>
          </el-col>
          <el-col :span="3">
            <el-button class="custom-button" :disabled="isDisabled">角度收缩</el-button>
          </el-col>
        </el-row>
      </el-footer>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible:false,
      activeName: "first",
      num: 19,
      main_video : require('@/components/VideoSurveillance/lanhu_shipinjiankong/assets/img/537b851b26e94083b55008f0d915e8d2_mergeImage.png'),
      aside_video: require('@/temp/test.png'),
      playButton : require('@/temp/img1.png'),
      isDisabled : false,
    }
  },
  methods:{
    changeVideo(){
      this.main_video = this.aside_video;
      this.disableButton();
    },
    disableButton() {
      // 在这里写下禁用按钮的逻辑
      this.isDisabled = true;
    },
  }
};
</script>

<style scoped>
.grid-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*border: 1px solid #ccc; !* 添加边框 *!*/
  padding: 10px; /* 可以添加其他样式 */
  margin: 5px; /* 添加边距 */
  position: relative;
  overflow: hidden; /* 防止内容超出边框显示 */
}

.bordered {
  /*border: 1px solid #ccc; !* 添加边框 *!*/
}
.custom-title {
  background-color: #E8F8F9;
  width: 100%; /* 确保标题栏宽度铺满 */
  padding: 20px; /* 可以根据需要调整填充 */
  margin-left: -20px;
  margin-top: -20px;
}
.custom-button {
  background-color: transparent;
  color: #9FE0DA;
  border-color: #9FE0DA;
}

.custom-button:active {
  background-color: rgba(0, 0, 0, 0.1); /* 为按钮添加半透明的背景色以显示点击效果 */
  transition: background-color 0.3s; /* 添加过渡效果 */
}
</style>
